<template>
	<div id="one">
		<h1>one</h1>
		<button @click="changeCity(city[0])">北京</button>
		<button @click="changeCity(city[1])">上海</button>
		<button @click="changeCity(city[2])">广州</button>
		<oneone :city="message" :num="onum"></oneone>
		<hr />
		<p>子组件传给父组件的值：{{pass}}</p>
		<!-- 自定义事件触发的方法不要加括号() -->
		<onetwo @passData="getVal"></onetwo>
	</div>
</template>

<script>
import Oneone from "./one-one.vue";
import Onetwo from "./one-two.vue";
export default {
	data(){
		return {
			message: "北京",
			city: ["北京","上海","广州"],
			onum: 1234,
			pass: ""
		}
	},
	components: {
		oneone: Oneone,
		onetwo: Onetwo
	},
	methods: {
		changeCity(cityval){
			this.message = cityval;
		},
		getVal(obj){
			this.pass = obj.value;
		}
	}
}

</script>

<style>
#one{
	padding: 20px;
	background: gold;
	border: 2px solid #000000;
}
</style>